<template>
  <div class="items">
    <ProductItem :product="ticket" :hasDel="false" :hasPrice="false" type="ticketrecord"  />
    <div class="use-info">
      <p>使用渠道： {{ticket.type_name}}</p>
      <p>使用时间： {{ticket.create_time}}</p>
      <p class="ellipsis" v-if="ticket.address">使用地址：{{ticket.address}}</p>
    </div>
  </div>
</template>

<script>
import ProductItem from '@/components/product/ProductItem'
export default {
  props: ["ticket"],
  components: {
    ProductItem,
  }
};
</script>

<style lang="less" scoped>
.items {
  width: 94vw;
  background: #fff;
  margin: 2vw auto;
  .type {
    font-size: 4.2vw;
    color: #333;
    margin-bottom: 2vw;
    padding: 0 4vw;
  }
  .ticket-info {
    display: flex;
    padding: 0 4vw 4vw 0;
    border-bottom: 1px solid #f9f9f9;
    .thumbnail {
      width: 23vw;
      height: 23vw;
    }
    .water-info {
      margin-left: 5vw;
      .name {
        font-size: 4.2vw;
        margin-bottom: 5vw;
      }
      .num {
        color: #999;
      }
    }
  }
  .use-info {
      padding: 5vw 4vw 2vw ;
      font-size: 3.5vw;
      color: #333;
      p {
          margin-bottom: 2vw;
      }
  }
}
</style>